<template>
  <div>
    <ul>
      <li>
    <p>姓名：{{data.list1.name}}</p>
    <p>年龄：{{data.list1.age}}</p>
      </li>
      <li>
    <p>姓名：{{data.list2.name}}</p>
    <p>年龄：{{data.list2.age}}</p>
      </li>
      <li>
    <p>姓名：{{data.list3.name}}</p>
    <p>年龄：{{data.list3.age}}</p>
      </li>
      <li>
    <p>姓名：{{data.list4.name}}</p>
    <p>年龄：{{data.list4.age}}</p>
      </li>
      <li>
    <p>姓名：{{data.list5.name}}</p>
    <p>年龄：{{data.list5.age}}</p>
      </li>
    </ul>
  </div>
<br>

<table border="1">
  <thead>
<tr style="background-color: aqua;">
  <td>用户借款编号</td>
  <td>借款用户账号</td>
  <td>借款款型名称</td>
  <td>借款金额</td>
  <td>剩余还款本金</td>
</tr>
  </thead>
  <tbody>
    <tr>
  <td>{{data.plist1.id}}</td>
  <td>{{data.plist1.zh}}</td>
  <td>{{data.plist1.name}}</td>
  <td>{{data.plist1.money}}</td>
  <td>{{data.plist1.huan}}</td>
</tr>

<tr>
  <td>{{data.plist2.id}}</td>
  <td>{{data.plist2.zh}}</td>
  <td>{{data.plist2.name}}</td>
  <td>{{data.plist2.money}}</td>
  <td>{{data.plist2.huan}}</td>
</tr>
  </tbody>
</table>
<div>
  <input type="text" v-model="name">
  <p>{{name}}</p>
</div>

</template>


<script setup lang="ts">

import { reactive } from 'vue';

//import { reactive,format,ref } from 'vue';

let data=reactive({
  list1:{name:"张大",age:21},
  list2:{name:"李尔",age:20},
  list3:{name:"刘珊",age:22},
  list4:{name:"钱嗣",age:25},
  list5:{name:"赵武",age:24},
 plist1:{id:1,zh:"zhangsan",name:"八维助学金",money:400,huan:0},
 plist2:{id:2,zh:"zhangsan",name:"八维助学金",money:10000,huan:10000},
})
//let {list}=format(data)
let name="哈哈哈"



</script>


<style scoped>

</style>